<template>
  <div>
    <film-swiper>
      <div v-for="item in imgList" :key="item" class="swiper-slide">
        <img :src="item" alt="轮播图">
      </div>
    </film-swiper>
    <film-header style="position: sticky; top: 0;background: white;"></film-header>
    <router-view></router-view>
  </div>
</template>

<script>
import FilmHeader from '@/views/film/FilmHeader'
import FilmSwiper from '@/views/film/FilmSwiper'

export default {
  name: 'Film',
  components: {
    FilmHeader,
    FilmSwiper
  },
  data() {
    return {
      imgList: [
        'https://static.maizuo.com/v5/upload/189bcf606b4bf49ad5de201a2ea5024d.jpg?x-oss-process=image/quality,Q_70',
        'https://static.maizuo.com/v5/upload/dfb943b2b8771769a9adef95459fe2ae.jpg?x-oss-process=image/quality,Q_70'
      ]
    }
  }
}
</script>

<style scoped>
.swiper-slide img {
  height: 56vw;
  width: 100%;
}
</style>
